<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
  <div id="app" style="max-width: 600px;margin: 30px auto ">
    
    <table v-cloak class="table table-hover table-condensed table-bordered">
      <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>购买数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in items" :key="index">
        <td>
          <input 
            @change="singleChecked"
            v-model="item.checked" type="checkbox">
          <span>{{item.name}}</span>
        </td>
        <td>
          ￥{{item.price}}
        </td>
        <td>
          <button 
            @click="addNum(index)"
            class="btn btn-xs">+</button>
          <span>{{item.num}}</span>
          <button 
            @click="reduceNum(index)"
            class="btn btn-xs">-</button>
        </td>
        <td>
          ￥{{ (item.price*item.num).toFixed(2) }}
        </td>
        <td>
          <button 
            @click="delItem(index)"
            class="btn btn-danger btn-xs">删除</button>
        </td>
      </tr>
      
      <tr>
        <td colspan="5">
          <input @change="allCheckedChange" type="checkbox" v-model="allChecked">
          全选
          <span>总价格：￥{{total}}</span>
        </td>
      </tr>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data:{
        item:{
          // 新增商品
          name:"",
          num:0,
          price:0
        },
        items: [
          {
            name:"商品1",
            price: 10,
            num: 12,
            checked: true
          },
          {
            name:"商品2",
            price: 15.9,
            num: 5,
            checked: false
          },
          {
            name:"商品3",
            price: 99.33,
            num: 8,
            checked: true
          }
        ],
        total: 0,
        allChecked: true
      },
      mounted() {
        // 自动调用的一个方法 
        this.calcTotal()
      },
      methods: {
        addItem(){
          // 增加商品
          // 利用展开运算符做浅拷贝
          /* this.items.push({
            ...this.item,
            checked: true
          }) */
          // Object.assign()  合并 对象
          this.items.push(Object.assign({checked: true},this.item))
          // JSON.parse(JSON.stringify(对象))
        },
        allCheckedChange(){
          // 全选选中和取消选中
          this.items.forEach(item=>{
            item.checked = this.allChecked;
          });
          this.calcTotal();
        },
        singleChecked(){
          // 商品选中取消选中
          this.calcTotal();
          const allChecked = this.items.every((item)=>item.checked);
          console.log(allChecked)
          this.allChecked = allChecked;
        },
        delItem(index){
          // s删除商品
          if(confirm('确认删除吗')){
            this.items.splice(index, 1);
            this.calcTotal();
          }
        },
        reduceNum(index){
          // 减少商品数量
          this.items[index].num--;
          if(this.items[index].num <= 1){
            this.items[index].num = 1;
          }
          this.calcTotal();
        },
        addNum(index){
          // 添加商品数量
          this.items[index].num++;
          this.calcTotal();
        },
        calcTotal () {
          // 计算总价格
          /* 
          已经选中的 商品的数量和单价 积 的总和
          */
         const checkedItems = this.items.filter(item=>item.checked);
         this.total = 0;
         checkedItems.forEach((item)=>{
            this.total += item.num*item.price;
         })
         this.total = parseFloat(this.total.toFixed(2));
      
        }
      }
    })
  /*   var obj = {
      a:10,
      b:20
    }
    var obj2 = {
      c:30,
      d:40
    }
    // Object.assign 合并对象
    var obj3 = Object.assign(obj,obj2);
    console.log(obj3) */

    /* var arr = [1,2,3,4];
    var arr2 = JSON.parse(JSON.stringify(arr)); */
  </script>
</body>
</html>